import React, { useMemo, useState } from 'react';
import CommonTable from '@/components/Table';
import AddForm from './AddForm';
import { Button, Switch, Tag } from 'antd';
import moment from 'moment';
import DetailDrawer from './DetailDrawer';
import { Questions } from '@/api/question';
import { addExams, getExams, deteleExams } from '@/api/exam/content';
import { getPapers } from '@/api/exam/paper';
import SearchBar from './Search';

const columns = [
  {
    title: '考试名称',
    dataIndex: 'examName',
    key: 'examName',
    width: '180px'
  },
  {
    title: '试卷',
    dataIndex: 'paperID',
    width: '100px',
    key: 'paperID',
  },
  {
    title: '开始时间',
    width: '200px',
    dataIndex: 'startTime',
    key: 'startTime',
    render: (text: number) => moment(text).format('YYYY-MM-DD HH:mm:ss')
  },
  {
    title: '结束时间',
    width: '200px',
    dataIndex: 'endTime',
    key: 'endTime',
    render: (text: number) => moment(text).format('YYYY-MM-DD HH:mm:ss')
  },
  {
    title: '参与考生',
    width: '120px',
    dataIndex: 'userIDs',
    key: 'userIDs'
  }
];

const Combination = () => {
  const [visible, setVisible] = useState(false);
  const [form, setAddForm] = useState(null);
  const [questions, setQuestions] = useState<Questions[]>([]);
  const toDetail = (content: string) => {
    setVisible(true);
  };

  const seePaper = (paperID: string) => {
    getPapers({
      _id: paperID
    }).then((res) => {
      if (res.data.length > 0) {
        setQuestions(JSON.parse(res.data[0].paperContent));
        setVisible(true);
      }
    });
  };

  const seeUserDetail = (users: string) => {

  }

  const tableCloumn = useMemo(() => {
    const index = columns.findIndex((it) => it.dataIndex === 'paperID');
    const index2 = columns.findIndex((it) => it.dataIndex === 'userIDs');
    columns[index].render = (paperID: string) => (
      <Button type="link" onClick={() => seePaper(paperID)}>
        查看详情
      </Button>
    );
    columns[index2].render = (users: string) => (
      <Button type="link" onClick={() => seeUserDetail(users)}>
        查看详情
      </Button>
    );
    return [...columns];
  }, []);

  const handleChange = () => {};

  return (
    <>
      <DetailDrawer questions={questions} visible={visible} setVisible={setVisible} />
      <CommonTable
        title="考试"
        columns={tableCloumn}
        onChange={handleChange}
        getDataApi={getExams}
        addDataApi={addExams}
        deleteApi={deteleExams}
        SerchBar={<SearchBar />}
        setAddForm={setAddForm}
        AddForm={<AddForm form={form} setVisible={setVisible} setQuestions={setQuestions} />}
        EditForm={<></>}
      />
    </>
  );
};

export default Combination;
